import { CSSProperties, useState, useMemo } from 'react';
import { View, Text } from '@tarojs/components';
// import Taro from "@tarojs/taro";
// import { Popup, IndexList, ConfigProvider } from '@taroify/core';
// import { Cross } from "@taroify/icons"
import { DynamicColors, GStyleSheet } from "@/utils/DarkMode";
import languageModel from '@/models/language';
// import NavigationBar from "../NavigationBar";
import { defaultCountryCode, getCountryForPhoneCode } from './tool'

interface IProps {
  style?: CSSProperties;
  valueCountry: string;
  onClose: () => void;
}

const dstyle = GStyleSheet.create({
  sendButton: {
    backgroundColor: '#F5F5F5',
    borderRadius: 20,
    padding: 5,
    paddingLeft: 15,
    paddingRight: 15,
    display: 'inline-block',
  },
  sendButtonText: {
    color: DynamicColors.normalTextColor
  }
});

const CountryPicker = ({ onClose, valueCountry = defaultCountryCode }: IProps) => {
  const styles = dstyle.useDynamicStyle()
  // const [show, setShow] = useState(false)
  // const systemInfo = useMemo(() => {
  //   return Taro.getSystemInfoSync();
  // }, []);

  const country = useMemo(() => {
    return getCountryForPhoneCode(languageModel.key, valueCountry)
  }, [valueCountry])

  return (
    <>
      <View>
        <View
          style={styles.sendButton}
        // onClick={() => setShow(true)}
        >
          <Text style={styles.sendButtonText}>{country?.countryName}{valueCountry}</Text>
        </View>
      </View>
      {/* <ConfigProvider theme={{ popupZIndex: '2001' }}>
        <Popup open={show} placement='bottom' onClose={onClose}>
          <View style={{ width: '100%', backgroundColor: '#fff', height: systemInfo.screenHeight, position: 'absolute', top: -systemInfo.screenHeight, }}>
            <NavigationBar
              title='选择国家'
              renderRight={<View onClick={() => setShow(false)}>
                <Cross />
              </View>}
            />
          </View>
        </Popup>
      </ConfigProvider> */}
    </>
  );
};

export default CountryPicker;
export { defaultCountryCode };
